<!-- 下拉菜单 -->
<template>
	<view class="v-select">
		<view :class="['v-select-item',{'v-select-item-selected':data.checked}]" @click.stop="selectItem()">
			<text>{{value.name}}</text>
			<icon class="iconfont icon">&#xe77e;</icon>
		</view>
	</view>
	<!-- 服务分类 -->
	<uni-popup ref="popup" type="top" class="removal" @change="popupChange" :popupTop="popupTop" :popupZIndex="9">
		<view class="content">
			<view class="item" v-for="(item,index) in list" :key="index" @click.stop="change(item)">
				<text :class="[{'text-selected':item.value==data.value}]">{{item.name}}</text>
			</view>
		</view>
	</uni-popup>
</template>
<script setup>
	import { ref, reactive, computed, watch } from 'vue';
	const emits = defineEmits(['callback']);
	const popup = ref(null);
	const popupTop = ref(`${uni.upx2px(88)}px`);
	const props_data = defineProps({
		type: {
			type: String
		},
		value: {
			type: Object
		},
		list: {
			type: Array
		}
	});
	const data = reactive({
		checked: false,
		value: props_data.list[0].value
	});

	function selectItem() {
		if (!data.checked) popup.value.open();
		else popup.value.close();
	}
	// 选中某项
	function change(item) {
		data.value = item.value;
		popup.value.close();
		emits('callback', { ...item, type: props_data.type });
	}

	function popupChange(e) {
		data.checked = e.show;
		if (e.show) {
			uni.$emit('openPopup', `SELECT_${props_data.type}`);
			uni.$once('openPopup', (res) => {
				if (res != `SELECT_${props_data.type}` && popup.value) popup.value.close();
			})
		}
	}
</script>
<style scoped lang="scss">
	@import '@/common/css/base.scss';
	.v-select {
		position: relative;
		z-index: 99999;
		height: 80rpx;
		background-color: #F3F5F7;
	}
	.v-select-item {
		@include flex(row, center);
		height: 80rpx;
		text {
			font-size: 28rpx;
			color: #666;
		}
		.icon {
			margin-left: 6rpx;
			font-size: 28rpx;
			color: #aaa;
		}
		&-selected {
			text {
				color: $color;
			}
			.icon {
				transform: rotate(180deg);
				color: $color;
			}
		}
	}
	.content {
		padding: 0 34rpx;
		background-color: #fff;
		.item {
			height: 100rpx;
			line-height: 100rpx;
			border-bottom: 1px solid #eee;
			text-align: center;
			font-size: 30rpx;
			color: #333;
			.text-selected {
				font-weight: 700;
				color: $color;
			}
		}
	}
</style>
